<template>
  <div class="shareExperienceView-container" id="shareExperienceView-container">
    <div class="body-container">
      <div class="sub-title">基本信息</div>
      <div class="base-info">
        <a-form-model :model="form">
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="序列号">
                <a-input disabled v-model="form.sort"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="编号">
                <a-input disabled v-model="form.fileCode"> </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="创建时间">
                <a-input disabled v-model="form.createTime"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="创建人">
                <a-input disabled v-model="form.creator"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="类别">
                <a-input disabled v-model="form.fileTypeName"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="阅览次数">
                <a-input disabled v-model="form.viewersNumber"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-form-model-item label="文件">
            <bjUploadFile
              :viewMode="true"
              v-model="form.files"
              @preview="viewFile($event)"
              @download="downloadFile($event)"
              :replaceFields="{
                fileName: 'fileName',
                fileSize: 'fileSize',
                fileType: 'fileType',
              }"
            ></bjUploadFile>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div>
        <a-divider />
      </div>
      <div class="sub-title">评论</div>
      <div class="reply-container">
        <a-empty v-if="commentSoucre.length == 0" />
        <div
          class="reply-item"
          v-for="(item, index) in commentSoucre"
          :key="index"
        >
          <a-avatar :size="40" slot="avatar" src="" icon="user" />
          <div class="comment-basic">
            <div class="base-header">
              <div class="name">{{ item.creator }}</div>
              <div class="date-time">{{ item.createTime }}</div>
            </div>
            <div class="base-content">
              {{ item.noticeUserNames }} {{ item.feedbackComment }}
            </div>
            <div class="del" id="delete-container">
              <div class="score">
                <icon-font type="icon-pingfen"></icon-font>
                <span>{{ item.score }}分</span>
              </div>
            </div>
            <a-divider />
          </div>
        </div>
      </div>
    </div>
    <!-- 验证码 -->
    <t-modal
      title="验证码"
      width="900px"
      :visible="codeVisible"
      wrapClassName="share-code-container"
      forceRender
      :closable="false"
      :getContainer="getContainer"
    >
      <a-form-model
        :model="form"
        :rules="rules"
        ref="ruleForm"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-model-item
          ref="verificationCode"
          label="验证码"
          prop="verificationCode"
        >
          <a-input
            v-model="form.verificationCode"
            placeholder="请输入验证码"
          ></a-input>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button type="primary" @click="handelSubmit()">
          确定
        </a-button>
      </template>
    </t-modal>

    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </div>
</template>

<script>
import axios from "axios";
import { baseUrl } from "@/services/baseUrl.js";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import { mapGetters } from "vuex";
import { downloadDfs } from "@/utils/TopVUI";
//预览
import previewModal from "@/pages/document/minio/previewModal";
//附件
import bjUploadFile from "@/components/extendCustom/bj-upload-file";
export default {
  components: {
    bjUploadFile,
    IconFont,
    previewModal,
  },

  data() {
    return {
      commentSoucre: [],
      form: {
        //验证码
        verificationCode: "",
        //序列号
        sort: "",
        //编号
        fileCode: "",
        //创建时间
        createTime: "",
        //创建人
        creator: "",
        //文件名称
        fileTypeName: "",
        //预览次数
        viewersNumber: "",
        //文件
        files: [],
      },
      rules: {
        verificationCode: [
          {
            required: true,
            message: "请输入验证码",
          },
        ],
      },
      //验证码弹窗
      codeVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },

  mounted() {
    this.getIsValidate();
  },
  methods: {
    //预览
    viewFile(file) {
      let { url } = file;
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("");
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },
    //下载
    downloadFile(row) {
      let { url } = row;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    // 是否需要验证码
    getIsValidate() {
      let { uuid } = this.$route.query;
      axios
        .get(
          `${baseUrl}/probusiness/documentProjectExperienceShare/queryIsValidate.api?uuid=${uuid}`,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          if (data.isValidate == 1) {
            this.codeVisible = true;
          } else {
            this.getData();
          }
        })
        .catch();
    },
    //确定
    handelSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.getData();
        }
      });
    },

    getData() {
      let { uuid } = this.$route.query;
      let { verificationCode = "" } = this.form;
      axios
        .get(
          `${baseUrl}/probusiness/documentProjectExperienceShare/getDetailByUuid.api?uuid=${uuid}&verificationCode=${verificationCode}`,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          if (data.statusCode == 300) {
            this.$message.error(data.message ?? "验证失败，请重新验证!");
          } else {
            this.commentSoucre = data?.feedbackList ?? [];
            //序列号
            this.form.sort = data?.experienceFile?.sort;
            //编号
            this.form.fileCode = data?.experienceFile?.fileCode;
            //创建时间
            this.form.createTime = data?.experienceFile?.createTime;
            //创建人
            this.form.creator = data?.experienceFile?.creator;
            //文件名称
            this.form.fileTypeName = data?.experienceFile?.fileTypeName;
            //预览次数
            this.form.viewersNumber = data?.experienceFile?.viewersNumber;
            //文件
            this.form.files = [];
            let list = JSON.parse(data?.experienceFile?.fileAddress ?? "[]");
            list.forEach((item) => {
              let lastIdx = item.name.lastIndexOf(".");
              let fileType = "." + item.name.substring(lastIdx + 1);
              this.form.files.push({
                fileName: item.name,
                fileType: fileType,
                url: item.url,
              });
            });
            this.codeVisible = false;
          }
        })
        .catch();
    },
    getContainer() {
      return document.getElementById("shareExperienceView-container");
    },
  },
};
</script>

<style lang="less" scoped>
.shareExperienceView-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  .body-container {
    flex: 1;
    overflow: auto;
    border-radius: 6px;
    background-color: #ffffff;
    padding: 24px 10px 10px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .sub-title {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #111111;
      padding: 0 0 10px 22px;
    }
    .base-info {
      padding: 0 120px 0 10px;
      /deep/.bj-upload-file .choosed-file-warp {
        width: 100%;
        overflow: hidden;
      }
    }
    .reply-container {
      flex: 1;
      padding: 0 22px;
      display: flex;
      flex-direction: column;
      position: relative;
      .reply-item {
        display: flex;
        .comment-basic {
          padding-left: 16px;
          flex: 1;
          .base-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 400;
            .name {
              font-size: 16px;
              color: #333333;
            }
            .date-time {
              font-size: 14px;
              color: #999999;
            }
          }
          .base-content {
            padding: 4px 0;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
          }
          .del {
            display: flex;
            .score {
              padding-right: 16px;
              .anticon {
                margin-right: 16px;
              }
            }
            .anticon-delete {
              padding-left: 16px;
              margin-right: 8px;
              cursor: pointer;
            }
          }
        }
      }
      /deep/.ant-empty {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    /deep/.ant-divider {
      margin: 16px 0;
    }
    /deep/.ant-form-item {
      display: flex;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 102px;
        white-space: pre-wrap;
        display: flex;
        justify-content: flex-end;
        line-height: 20px;
        margin-right: 2px;
        align-items: center;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
}
/deep/.share-code-container {
  background-color: rgba(0, 0, 0, 0.35);
}
</style>
